<template>
    <div class="container" id="upFood">
        <div class="food-menu" v-if="true">
            <div class="menu-img">
                <input type="file" accept="image/*" @change="showImg()" ref="img">
                <div class="img-wrap" v-if="imgUpload.imgShow">
                    <img :src="imgUpload.imgSrc" alt="">
                    <i class="el-icon-refresh menu-refresh" @click="changeImg()"></i>
                </div>
                <div v-if="imgUpload.uploading">正在上传</div>
                <div class="mi-tips">
                    添加菜谱成品图
                    <p>（建议尺寸1280*1024，支持上传图片格式有jpg、jpeg、png、gif、webp）</p>
                </div>
            </div>
            <input type="text" class="food-name" v-model="info.menuName" placeholder="菜谱名称">
            <div class="food-filter">
                <div class="food-level">
                    <el-select v-model="value1" placeholder="请选择">
                        <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="food-time">
                    <el-select v-model="value2" placeholder="请选择">
                        <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <textarea class="menu-introduce" v-model="info.introduce" placeholder="这道菜背后的故事"></textarea>
            <div class="food-title">
                <h3>食材清单</h3>
            </div>
            <div class="food-list" >
                <div class="fl-rows">
                    <span>食材</span>
                    <span>用量</span>
                </div>
                <div class="fl-rows" v-for="(data,index) in foods" :key="index">
                    <input type="text" v-model="data.food" @focus="foodsFocus(index)">
                    <input type="text" v-model="data.level">
                    <div class="fl-buttons">
                        <button class="el-icon-plus" @click="addFood(index)"></button>
                        <button class="el-icon-top" @click="upFood(index)"></button>
                        <button class="el-icon-bottom" @click="downFood(index)"></button>
                        <button class="el-icon-minus" @click="removeFoodIn(index)"></button>
                    </div>
                </div>
            </div>
            <span class="fl-add" @click="addFoodOut()">增加一栏</span>
            <div class="food-title">
                <h3>步骤
                    <p>（支持上传图片格式有jpg、jpeg、png、gif、webp，大小限制在5M以内）</p>
                </h3>
            </div>
            <div class="fs-adds">
                <div>
                  <span>批量上传</span>
                  <input type="file" accept="image/*" multiple="multiple" @change="uploadFiles" ref="files">
                  </div>
                <span>按住Ctrl键可多选，为保证您的使用体验，请单次上传图片不要超过6张</span>
            </div>
            <div class="food-step">
                <div class="fs-list">
                    <div class="fs-rows" v-for="(data, index) in steps" :key="index">
                        <div class="fs-img">
                            <div class="fs-bg">
                                <p>添加步骤图</p>
                            </div>
                            <div class="img-wrap" v-if="data.imgShow" >
                                <img :src="data.imgSrc" alt="">
                                <i class="el-icon-refresh menu-refresh" @click="changeImgs(index)"></i>
                            </div>
                            <input type="file" accept="image/*" @change="showImgs(index)" ref="imgs">
                        </div>
                        <textarea class="fs--desc" @focus="stepsFocus(index)" v-model="data.step"></textarea>
                        <div class="fs-btns">
                            <button class="el-icon-plus" @click="addStep(index)"></button>
                            <button class="el-icon-top" @click="upStep(index)"></button>
                            <button class="el-icon-bottom" @click="downStep(index)"></button>
                            <button class="el-icon-minus" @click="removeStep(index)"></button>
                        </div>
                    </div>
                </div>
            </div>
            <span class="fl-add" @click="addStepOut()">增加一栏</span>
            <div class="food-title">
                <h2>小贴士</h2>
            </div>
            <textarea class="food-tips" v-model="info.tips"></textarea>
<!--            <div class="ft-choose">-->
<!--                <input type="radio">-->
<!--                <span>独家菜谱（此菜谱仅在该平台发布）</span>-->
<!--            </div>-->
<!--            <div class="food-vedio" v-show="!videoShow">-->
<!--                上传视频-->
<!--                <input type="file" accept="video/*" @change="uploadVideo()" ref="video">-->
<!--            </div>-->
            <div class="food-video" v-show="videoShow">
                <p>视频已上传成功</p>
                <span @click="videoChange()">重新选择视频</span>
                <span @click="videoDel()">删除视频</span>
            </div>
            <div class="menu-code">
                <span>验证码：</span>
                <input type="text" v-model="imputCode">
                <div class="code" @click="refreshCode">
                    <s-identify :fresh="flag" @makedCode="getMakedCode"></s-identify>
                </div>
            </div>
            <div class="food-submit" @click="submitFun">发布</div>
        </div>
    </div>
</template>
<script>
import SIdentify from '../home/tool/SIdentify.vue'
export default {
  components: { SIdentify },
  inject: ['reload'],
  data () {
    return {
      showJudje: false,
      flag: true,
      code: '',
      imputCode: '',
      videoShow: false,
      videoSrc: 123,
      options1: [{
        value: '0',
        label: '烹饪难度'
      }, {
        value: '1',
        label: '切墩（初级）'
      }, {
        value: '2',
        label: '配菜（中级）'
      }, {
        value: '3',
        label: '掌勺（高级）'
      }],
      value1: '0',
      options2: [{
        value: '0',
        label: '烹饪时间'
      }, {
        value: '1',
        label: '10分钟左右'
      }, {
        value: '2',
        label: '10-30分钟'
      }, {
        value: '3',
        label: '30-60分钟'
      }, {
        value: '4',
        label: '1小时以上'
      }],
      value2: '0',
      imgUpload: {
        imgShow: false,
        uploading: false,
        imgSrc: null
      },
      foods: [{}, {}, {}, {}],
      fodsFilter: [],
      steps: [{}],
      stepsFilter: [],
      info: {},
      resultData: {},
      userInfo: this.$store.state.userMsg
    }
  },
  methods: {
    showImg () {
      var that = this
      if ((this.$refs.img.files[0].size / 1024 / 1024) > 5) {
        this.$message({
          message: '文件大小不得超过5M,请重新上传',
          type: 'warning'
        })
        this.$refs.img.value = ''
      } else {
        var f = new FileReader()
        f.readAsDataURL(this.$refs.img.files[0])
        f.onload = function () {
          that.imgUpload.imgSrc = f.result
        }
        that.imgUpload.imgShow = true
      }
    },
    changeImg () {
      this.$refs.img.dispatchEvent(new MouseEvent('click'))
    },
    addFood (index) {
      this.foods.splice((index + 1), 0, {})
    },
    addFoodOut () {
      this.foods.push({})
    },
    upFood (index) {
      if (index === 0) {
        this.$message('改行已经是第一位')
      } else {
        const str = this.foods[index]
        this.foods.splice(index, 1, this.foods[index - 1])
        this.foods.splice((index - 1), 1, str)
      }
    },
    downFood (index) {
      if (index === this.foods.length - 1) {
        this.$message('改行已经是最后一行')
      } else {
        const str = this.foods[index]
        this.foods.splice(index, 1, this.foods[index + 1])
        this.foods.splice((index + 1), 1, str)
      }
    },
    removeFoodIn (index) {
      this.foods.splice(index, 1)
    },
    foodsFocus (index) {
      if (index === (this.foods.length - 1)) {
        this.addFood(this.foods.length - 1)
      }
    },
    showImgs (index) {
      var that = this
      if ((this.$refs.imgs[index].files[0].size / 1024 / 1024) > 5) {
        this.$message({
          message: '文件大小不得超过5M,请重新上传',
          type: 'warning'
        })
        this.$refs.imgs[index].value = ''
      } else {
        var f = new FileReader()
        f.readAsDataURL(this.$refs.imgs[index].files[0])
        const str = that.steps[index]
        f.onload = function () {
          str.imgSrc = f.result
          that.$set(that.steps[index], 'imgSrc', f.result)
        }
        this.$set(this.steps[index], 'imgShow', true)
        that.$set(that.steps[index], 'imgSrc', f.true)
        that.$set(that.steps[index], 'img', this.$refs.imgs[index].files[0])
      }
    },
    uploadFile (file, index) {
      return new Promise((resolve, reject) => {
        var that = this
        var f = new FileReader()
        f.readAsDataURL(file)
        f.onload = function () {
          that.$set(that.steps[index], 'imgSrc', f.result)
          that.$set(that.steps[index], 'imgShow', true)
          // that.$set(that.steps[index], 'imgSrc', f.true)
          that.$set(that.steps[index], 'img', file)
          resolve()
        }
      })
    },
    async uploadFiles () {
      const imgs = this.$refs.files.files
      var imgLen = imgs.length
      if (imgLen > 6) {
        imgLen = 6
        this.$message('图片数量超过6张将仅保留前六张')
      } else {
        imgLen = imgs.length
      }
      let isShow = true
      for (const items of imgs) {
        if (items.size / 1024 / 1024 > 5) {
          this.$message({
            message: '图片大小不得超过5M,已取消上传请重试',
            type: 'warning'
          })
          isShow = false
        }
      }
      if (isShow) {
        var arrIndex = []
        for (let i = 0; i < this.steps.length; i++) {
          if (!this.steps[i].img) {
            arrIndex.push(i)
          }
        }
        console.log(arrIndex)
        console.log(imgLen)
        if (arrIndex.length >= imgLen) {
          for (let i = 0; i < imgLen; i++) {
            await this.uploadFile(imgs[i], arrIndex[i])
          }
        } else {
          let i = 0
          for (i; i < arrIndex.length; i++) {
            await this.uploadFile(imgs[i], arrIndex[i])
          }
          for (i; i < imgLen; i++) {
            const that = this
            that.steps.push({})
            await this.uploadFile(imgs[i], (that.steps.length - 1))
          }
        }
      }
      this.$refs.files.value = ''
    },
    changeImgs (index) {
      this.$refs.imgs[index].dispatchEvent(new MouseEvent('click'))
    },
    addStep (index) {
      this.steps.splice((index + 1), 0, {})
    },
    addStepOut () {
      this.steps.push({})
    },
    upStep (index) {
      if (index === 0) {
        this.$message('改行已经是第一位')
      } else {
        const str = this.steps[index]
        this.steps.splice(index, 1, this.steps[index - 1])
        this.steps.splice((index - 1), 1, str)
      }
    },
    downStep (index) {
      if (index === this.steps.length - 1) {
        this.$message('改行已经是最后一行')
      } else {
        const str = this.steps[index]
        this.steps.splice(index, 1, this.steps[index + 1])
        this.steps.splice((index + 1), 1, str)
      }
    },
    removeStep (index) {
      this.steps.splice(index, 1)
    },
    stepsFocus (index) {
      if (index === (this.steps.length - 1)) {
        this.addStep(this.steps.length - 1)
      }
    },
    refreshCode () {
      this.flag = !this.flag
    },
    getMakedCode (code) {
      this.code = code
    //   console.log('getMakedCode:', this.code)
    },
    uploadVideo () {
      var that = this
      console.log(this.videoSrc)
      var f = new FileReader()
      f.readAsDataURL(this.$refs.video.files[0])
      f.onload = function () {
        that.videoShow = !that.videoShow
      }
      that.videoSrc = this.$refs.video.files[0]
    },
    videoChange () {
      this.videoShow = !this.videoShow
      this.$refs.video.value = ''
      this.$refs.video.dispatchEvent(new MouseEvent('click'))
    },
    videoDel () {
      this.videoShow = !this.videoShow
      this.$refs.video.value = ''
      this.video = null
    },
    uploadBase () {
      return new Promise((resolve, reject) => {
        const file = this.$refs.img.files[0]
        const param = new FormData()
        param.append('menuSrc', file)
        param.append('cookTime', this.options2[this.value2].label)
        param.append('difficulty', this.options1[this.value1].label)
        param.append('introduce', this.info.introduce)
        param.append('menuName', this.info.menuName)
        param.append('tips', this.info.tips)
        param.append('userId', this.$store.state.userMsg.userId)
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$axios.post('Menu/User/addMenu', param, config)
          .then(res => {
            console.log(res.data)
            if (res.data.code === 200) {
              resolve(res.data.object)
            }
          })
          .catch(err => {
            reject(err.data)
          })
      })
    },
    uploadSteps (key) {
      return new Promise((resolve, reject) => {
        const file = key.img
        const param = new FormData()
        param.append('stepSrc', file)
        param.append('menuId', this.resultData.menuId)
        param.append('content', key.step)
        param.append('userId', this.userInfo.userId)
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$axios.post('Menu/User/addStep', param, config)
          .then(res => {
            if (res.data.code === 200) {
              resolve(res.data.code)
            } else {
              reject(res.data.message)
            }
          })
          .catch(err => {
            reject(err.data)
          })
      })
    },
    uploadFoods (dosage, ingredientsName) {
      return new Promise((resolve, reject) => {
        this.$axios({
          method: 'post',
          url: '/Menu/User/addIngredient',
          params: {
            dosage,
            ingredientsName,
            menuId: this.resultData.menuId,
            userId: this.userInfo.userId
          }
        }).then(data => {
          if (data.data.code === 200) {
            resolve(data.data.code)
          } else {
            reject(data.data.message)
          }
        }).catch(error => {
          reject(error)
        })
      })
    },
    judgeFunNormal () {
      if (this.info.menuName === undefined) {
        this.$message('请填写菜谱名称')
        return false
      } else if (this.info.introduce === undefined) {
        this.$message('请填写菜谱介绍')
        return false
      } else if (this.info.tips === undefined) {
        this.$message('请填写小贴士')
        return false
      } else if (this.value1 === '0') {
        this.$message('请选择烹饪难度')
        return false
      } else if (this.value2 === '0') {
        this.$message('烹饪时间')
        return false
      } else if (this.imputCode.trim() === '') {
        this.$message('请填写验证码')
        return false
      } else {
        if (this.imputCode === this.code) {
          return true
        } else {
          this.$message.error('验证码错误请重试')
          return false
        }
      }
    },
    judjeFood () {
      this.fodsFilter = []
      for (let i = 0; i < (this.foods.length - 1); i++) {
        if (this.foods[i].food !== undefined && this.foods[i].level !== undefined) {
          this.fodsFilter.push(this.foods[i])
        }
      }
      return true
    },
    judjeStep () {
      this.stepsFilter = []
      for (let i = 0; i < (this.steps.length - 1); i++) {
        if (this.steps[i].img !== undefined && this.steps[i].step !== undefined) {
          this.stepsFilter.push(this.steps[i])
        }
      }
      return true
    },
    async submitFun () {
      if (this.judgeFunNormal() && this.judjeFood() && this.judjeStep()) {
        const loading = this.$loading({
          lock: true,
          text: '菜单上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.6)'
        })
        var result = 200
        try {
          this.resultData = await this.uploadBase()
        } catch (err) {
          result = err
        }
        console.log(this.resultData)
        for (const item of this.fodsFilter) {
          try {
            this.uploadFoods(item.level, item.food)
          } catch (err) {
            result = err
          }
        }
        for (const item of this.stepsFilter) {
          try {
            await this.uploadSteps(item)
          } catch (err) {
            result = err
          }
        }
        if (result !== 200) {
          this.$message.error(result)
          this.deleteMenu()
          loading.close()
          this.reload()
        } else {
          this.$message({
            message: '食谱上传成功，请等待管理员审核',
            type: 'success'
          })
          loading.close()
          this.reload()
        }
      }
    },
    deleteMenu () {
      this.$axios({
        method: 'delete',
        url: '/Menu/User/deleteMenu',
        params: {
          menuId: this.resultData.menuId,
          userId: this.userInfo.userId
        }
      })
    }
  },
  mounted () {
    this.flag = !this.flag
    console.log(this.showJudje)
  }
}
</script>

<style lang="less" scoped>
.container{
    width: 1000px;
    margin: 60px auto;
    height:auto;
    .food-title{
        line-height:78px;height:78px;
        text-align:left;
        border-top: 1px solid #E5E3DF;
        h3{
            font-size:18px;
            p{
                display:inline-block;font-size: 12px;color: #999;font-weight:normal;
            }
        }
    }
    .food-menu{
        width: 690px;
        padding-top: 20px;
        text-align:left;
        .menu-img{
            position:relative;width:690px;height:390px;
            background: #eee url("https://cp1.douguo.com/static/nweb/images/add.png") no-repeat center 140px;
            input{
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            textarea{color: #000;}
            .mi-tips{
                position: absolute;
                top: 225px;
                width: 100%;
                text-align: center;
                text-align: center;color: #999;font-size: 15px;line-height: 20px;
                p{
                    font-size: 13px;
                }
            }
            .img-wrap{
                width: 100%;height:100%;
                position: absolute;
                top: 0;left: 0;
                z-index: 4;
                &:hover{
                    .menu-refresh{
                        display: block;
                    }
                }
            }
            img{
                width: 100%;
                height: 100%;
                z-index: 4;
            }
            .menu-refresh{
               position: absolute;top:10px;right:10px;
               font-size: 25px;
               font-weight: bold;
               display: none;
               z-index: 4;
            }
        }
        .food-filter{
            overflow: hidden;
            margin-top:20px;
            div{
                float: left;
                width: 132px;margin-right: 14px;text-align: center;
            }
        }
        input{
            display: block;
            width: 690px;height: 42px;
            line-height:42px;
            border: 1px solid #E5E3DF;
            padding:0 12px;
            border-radius: 4px;
            font-size: 15px;
            margin-top: 20px;
        }
        .menu-introduce{
            width: 690px;height: 170px;margin-top: 30px;
            border: 1px solid #E5E3DF;
            padding: 12px;
            border-radius: 4px;resize: none;
            font-size: 15px;
            margin-bottom: 20px;
        }
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
           font-size:15px;
           color: rgba(0,0,0,0.7);
        }/*webkit 内核浏览器*/
         input::-moz-placeholder, textarea:-moz-placeholder{
           font-size:15px;
           color: rgba(0,0,0,0.7);
        }/*Mozilla Firefox 19+*/
         input:-moz-placeholder, textarea:-moz-placeholder{
           font-size:15px;
           color: rgba(0,0,0,0.7);
        }/*Mozilla Firefox 4 to 18*/
        input:-ms-input-placeholder, textarea:-ms-input-placeholder{
          font-size:15px;
          color: rgba(0,0,0,0.7);
        }/*Internet Explorer 10+*/
        .food-img-title{
            position:relative;width:345px;height:195px;
            background:url("https://i1.douguo.com//upload/banner/1543312604.jpg");
            input{
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;left: 0;
            }
        }
        .menu-submit{
            display: block;
            text-align: center;
            border:0;
            width: 120px;height: 40px;
            margin-top: 28px;padding: 0;
            font-size: 14px;
            line-height: 40px;
            background: #FFB31A;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
        }
        .food-list{
            margin: 20px 0 10px;background: #F1F7FA;border-radius: 8px;
            .fl-rows{
                width: 100%;
                // height: 42px;line-height: 42px;
                margin:0 auto;
                padding-bottom: 10px;
                display:grid;
                grid-template-columns: 300px 200px 110px;
                place-content: space-around space-evenly;
                span{
                    padding-top: 20px;
                }
                input{
                    display:block;
                    width: 100%;
                    margin-bottom: 10px;
                    margin-top: 10px;
                    padding: 0;
                    text-indent: 1em;
                }
                .fl-buttons{
                    display:grid;
                    grid-template-columns: repeat(4,24px);
                    place-content: space-around space-between;
                    button{
                        border-radius: 12px;
                        height:24px;line-height: 24px;
                        background-color: #F4B644;
                        color: #fff;
                        font-size:18px;
                        font-weight: bold;
                        &:hover:hover{
                            cursor: pointer;
                        }
                    }
                    button:nth-child(4){
                        background-color: #ff4c44;
                    }
                }
            }
        }
        .fl-add{
            display: block;font-size: 15px;color: #256DC6;line-height: 16px;
            margin: 20px 0 20px 0;
            &:hover{
                cursor: pointer;
            }
        }
        .fs-adds{
            div:nth-child(1){
                // padding: 8px 15px;
                font-size: 13px;
                height: 40px;
                line-height: 40px;
                width: 84px;
                text-align: center;
                color: #fff;
                background: #FFB31A;
                border-radius: 4px;
                display: inline-block;
                margin:15px 10px 0 0;
                position: relative;
                span{
                  display: inline-block;
                  width: 100%;height: 100%;
                  z-index: 3;
                }
                input{
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  display: inline-block;
                  margin: 0;
                  padding: 0;
                  opacity: 0;
                  z-index: 4;
                  top: 0;left: 0;
                  background-color: #fff;
                }
              }
        }
        .food-step{
            margin-top:20px;
            width: 100%;
            .fs-list{
                .fs-rows{
                    display:grid;
                    grid-template-columns: 200px 440px 24px;
                    place-content: space-around space-between;
                    height:200px;
                    width: 690px;
                    margin: 20px 0;
                    .fs-img{
                        height:200px; width:200px;
                        background-color: #EEE;
                        position:relative;
                        border-radius: 8px;
                        overflow: hidden;
                        input{
                            opacity: 0;
                            width: 100%;
                            height: 100%;
                            z-index: 2;
                            position: absolute;
                            top: 0;left: 0;
                        }
                        .fs-bg{
                            background:url("https://www.douguo.com/static/nweb/images/add.png") no-repeat;
                            background-position: center 48px;
                            background-size:70px;
                            width: 200px;height: 200px;top: 0;left: 0;
                            position: absolute;
                            z-index: 1;
                            p{
                                font-size: 15px;color: #999;
                                text-align: center;
                                margin-top:120px;
                            }
                        }
                        .menu-refresh{
                            position: absolute;top:10px;right:10px;
                            font-size: 25px;
                            font-weight: bold;
                            display: none;
                            z-index: 5;
                        }
                        img{
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top: 0;left: 0;
                            z-index: 4;
                            &:hover+.menu-refresh{
                                display: block;
                            }
                        }
                    }
                    textarea {
                        display: inline-block;
                        padding: 12px 10px;
                        resize: none;
                        border-radius: 4px;
                        border: 1px solid #E5E3DF;
                        font-size: 15px;color: #333;
                    }
                    .fs-btns{
                        width: 100%;height: 150px;
                        padding: 25px 0;
                        display:grid;
                        grid-template-rows: repeat(4,40px);
                        place-content: space-around space-evenly;
                        button{
                            width: 24px;height:24px;
                            border-radius: 12px;
                            line-height: 24px;
                            color: #fff;
                            background-color: #F4B644;
                            font-size:18px;
                            font-weight: bold;
                            &:hover:hover{
                                cursor: pointer;
                            }
                        }
                        button:last-child{
                            background-color: #ff4c44;
                        }
                    }
                }
            }
        }
        .food-tips{
           display: inline-block;
           resize: none;
           width: 690px;height: 170px;
           margin: 20px 0;
           padding: 12px;border: 1px solid #E5E3DF;
           border-radius: 4px;
           font-size: 15px;
           line-height:27px;
           color: #333;
        }
        .ft-choose{
            input{
                width: 15px; height:15px;
                margin:0 6px;
                display: inline-block;
            }
        }
        .food-vedio {
            width: 168px;
            height: 42px;
            border-radius: 4px;
            margin-top: 20px;
            background: #FFB31A;
            font-size: 18px;
            line-height: 42px;
            text-align: center;
            color: #fff;
            position: relative;
            input{
                position:absolute;
                top: 0;
                left: 0;
                width: 100%;height: 100%;
                opacity: 0;
                z-index: 2;
            }
        }
        .food-video{
            margin-top: 10px;
            span{
                display: inline-block;
                width: 168px;
                height: 42px;
                border-radius: 4px;
                margin-top: 20px;
                margin-right: 10px;
                background: #FFB31A;
                font-size: 18px;
                line-height: 42px;
                text-align: center;
                color: #fff;
            }
        }
        .food-submit {
            display: inline-block;
            width: 168px;
            height: 42px;
            border-radius: 4px;
            margin-top: 20px;
            background: #FFB31A;
            font-size: 18px;
            line-height: 42px;
            text-align: center;
            color: #fff;
            &:hover{
              cursor: pointer
            }
        }
        .menu-code{
            height: auto;line-height: 42px;overflow: hidden;
            padding: 10px 0;
            span{
                font-size: 13px;
                float: left;
            }
            input{
                width: 200px;
                height: 42px;
                float: left;
                margin: 0 10px 0 0;
            }
            .code {
                width: 114px;float: left;
                height: 40px;
                /*border: 1px solid red;*/
                &:hover{cursor: pointer;}
            }
        }
    }
}
</style>
